<template>
  <div class="h-full generate-layout-content-center relative border border-gray-300">
    <div class="dra-body pb-4">
      <CommonDraggable :layouts="layouts" :active-id="activeId" @activeItem="activeItem"></CommonDraggable>
    </div>
    <div class="w-full h-6 text-center absolute top-0 bottom-0 m-auto" v-if="!layouts.length">
      从左侧拖入或点选组件进行表单设计
    </div>
  </div>
</template>

<script>
import CommonDraggable from "../CommonDraggable"
export default {
  name: "generate-layout-content",
  props: {
    layouts: {
      type: Array
    },
    activeId:{
      type:Number
    }
  },
  methods:{
    activeItem(currentItem) {
      this.$emit("activeItem", currentItem)
    },
  },
  components:{
    CommonDraggable
  }
}
</script>

<style scoped>
.generate-layout-content-center {
  width: calc(100% - 40rem);
}

.dra-body {
}
</style>